<template>
  <view class="bg">
    <view class="task_bg">
      <view v-for="(item, index) in taskArr" :key="index" class="task_one">
        <view class="task_left_top">
          <view class="task_round">
            <image src="../../../static/images/common/task.png" mode=""></image>
          </view>
          <view class="name">{{ item.name }}</view>
        </view>
        <view class="task_content">
          <view class="task_name">
            <view class="task_left">任务名称</view>
            <view class="task_right nameFont">{{ item.rwmc }}</view>
          </view>
          <view class="task_child">
            <view class="task_test">
              <view class="task_left">任务内容</view>
              <view class="task_right childFont">{{ item.zsx }}</view>
            </view>
          </view>
        </view>
      </view>

      <view class="title_flex">
        <view class="sub_title">考核综合排名</view>
        <view class="sub_title_sm">
          <view class="av">平均</view>
          <u-icon name="arrow-down" color="rgba(142, 156, 179, 1)"></u-icon>
        </view>
      </view>

      <view class="task_one">
        <view class="rankTable">
          <view class="rankTh">
            <view>单位</view>
            <view class="w50">排名</view>
          </view>
          <view class="rankTr" v-for="(item, index) in rankArr" :key='index'>
            <view class="font1">{{ item.name }}</view>
            <view class="no13 w50" v-show="item.pm <= 3">{{ item.pm }}</view>
            <view class="no4 w50" v-show="item.pm > 3">{{ item.pm }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      taskArr: [
        {
          name: "单位重大事项",
          rwmc: "大樟溪沿线重点地段果树林下生态修复工作任务清单",
          zsx:
            "推广生态调控、农艺改良、物理防控、生物防治等措施，2020年实现不用化学农药绿色生态茶园1.8万亩。",
        },
      ],
      rankArr: [
        {
          name: "民政局",
          pm: 1,
        },
        {
          name: "住建局",
          pm: 2,
        },
        {
          name: "司法局",
          pm: 3,
        },
        {
          name: "水利局",
          pm: 4,
        },
        {
          name: "文明办",
          pm: 5,
        },
        {
          name: "发展与改革局",
          pm: 6,
        },
        {
          name: "商务局",
          pm: 7,
        },
        {
          name: "城管局",
          pm: 8,
        },
        {
          name: "塘前乡",
          pm: 9,
        },
      ],
    };
  },
  methods: {},
};
</script>

<style lang="scss" scoped>
.sub_title_sm {
  font-size: 28rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #272b32;
  margin: 30rpx 0;
  display: flex;
  .av {
    margin-right: 20rpx;
  }
}
.top_search {
  width: 100vw;
  height: 120rpx;
  background-color: #3988ff;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;

  .search_screening {
    margin-left: 2%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 32rpx;
      height: 32rpx;
      margin-right: 10rpx;
    }

    .font {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.7);
    }
  }
}

.popupModel {
  position: relative;
  padding-top: 48rpx;

  .task_left_top {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 150rpx;
    height: 48rpx;
    background: rgba(48, 116, 255, 0.2);
    border-radius: 24rpx;
    display: flex;
    align-items: center;

    .name {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3074ff;
      padding: 0 20rpx;
    }

    .task_round {
      width: 48rpx;
      height: 48rpx;
      background: #3074ff;
      z-index: 999;
      box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .popupContent {
    padding: 24rpx;

    .Content {
      width: 100%;
      display: flex;
      align-items: center;

      .name {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #272b32;
      }
    }
  }
}

.task_bg {
  .title_flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .task_one {
    background-color: rgba(255, 255, 255, 1);
    padding: 24rpx;
    position: relative;
    // margin-bottom: 40rpx;
    box-shadow: 0px 0px 24rpx 0px rgba(48, 116, 255, 0.1);
    border-radius: 24rpx 8rpx 8rpx 8rpx;
  }
  .rankTable {
    .rankTh {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid rgba(231, 233, 240, 1);
      padding: 30rpx 76rpx;

      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8e9cb3;
    }
    .rankTr {
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1rpx solid rgba(231, 233, 240, 1);
      padding: 30rpx 76rpx;
      .font1 {
        font-size: 30rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #272b32;
      }
      .no13 {
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: 800;
        color: #faad33;
      }
      .no4 {
        font-size: 34rpx;
        font-family: PingFang SC;
        font-weight: 500;
        color: #8e9cb3;
      }
    }
    .w50 {
      width: 60rpx;
      text-align: center;
    }
    .rankTr:last-child {
      border-bottom: none;
    }
  }
  .task_left_top {
    position: absolute;
    top: 0;
    left: 0;
    min-width: 230rpx;
    height: 48rpx;
    background: rgba(48, 116, 255, 0.2);
    border-radius: 24rpx;
    display: flex;
    align-items: center;

    .name {
      font-size: 20rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #3074ff;
      padding: 0 20rpx;
    }

    .task_round {
      width: 48rpx;
      height: 48rpx;
      background: #3074ff;
      z-index: 5;
      box-shadow: 2px 3px 12px 0px rgba(48, 116, 255, 0.4);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      image {
        width: 24rpx;
        height: 24rpx;
      }
    }
  }

  .task_content {
    width: 100%;
    margin-top: 40rpx;

    .task_btnArr {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      margin-top: 40rpx;
    }

    .task_btn {
      background: #3074ff;
      border-radius: 4rpx;
      padding: 8rpx 16rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 20rpx;

      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }

      .more {
        width: 24rpx;
        height: 6rpx;
        margin-right: 10rpx;
      }

      .font {
        font-size: 24rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
      }
    }

    .task_name {
      display: flex;
      padding-bottom: 40rpx;
    }

    .task_child {
      padding: 20rpx 0;
      border-top: 1rpx solid rgba(231, 233, 240, 1);
      border-bottom: 1rpx solid rgba(231, 233, 240, 1);
    }

    .task_test {
      display: flex;
      margin: 20rpx 0;
    }

    .task_left {
      flex: 2;
      font-size: 24rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #8e9cb3;
    }

    .nameFont {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: bold;
      color: #272b32;
    }

    .task_right {
      flex: 7;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .childFont {
        font-size: 28rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: #272b32;
      }

      .zt_type1 {
        margin-left: 10rpx;
        background: #f85f78;
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        padding: 0 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .zt_type2 {
        margin-left: 10rpx;
        background: rgba(250, 173, 51, 1);
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        padding: 6rpx 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .zt_type3 {
        margin-left: 10rpx;
        background: rgba(31, 211, 183, 1);
        border-radius: 4rpx;
        font-size: 20rpx;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
        padding: 6rpx 16rpx;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
</style>
